<template>
  <div class="">
    <div class="module-card">
      <div>
        <span>name：</span>
        <span>{{ main.name }}</span>
      </div>
      <div>
        <span>sex：</span>
        <span>{{ main.sex }}</span>
      </div>
      <div>
        <span>age：</span>
        <span>{{ main.age }}</span>
      </div>
      <div>
        <span>phone：</span>
        <span>{{ other.phone }}</span>
      </div>
    </div>
    <div class="module-card">
      <Child />
    </div>
    <div>
      <button @click="handleBtn">点这里触发子组件回调</button>
    </div>
  </div>
</template>

<script>
import { mixin } from './mixin.js';
export default {
  props: {},
  mixins: [mixin],
  components: {
    Child: () => import('./Child.vue'),
  },
  data() {
    return {};
  },
  created() {},
  mounted() {
    this.initDataFun(); // 初始化数据
  },
  beforeDestroy() {
    if (this.mixinProReset) {
      this.mixinProReset()
    }
  },
  watch: {},
  computed: {},
  methods: {
    // 初始化数据
    initDataFun() {
      this.main.name = '西西';
      console.log(this.main, this.other);
    },
    handleBtn() {
      if (this.mixinPro?.inputChildCallback) {
        this.mixinPro.inputChildCallback()
      }
    }
  },
};
</script>

<style lang="less"></style>

<style lang="less" scoped></style>
